<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-3.4.1.js"></script>
    <style type="text/css">


    </style>
</head>
<body>
<a class="tooltip" title="点击即可跳转" href="#none">悬浮查看提示</a>
<img class="image-tooltip" src="../../resource/image/1.jpg" height="90" width="120"/>
<script type="text/javascript">

    $(function () {
        const x = 10;
        const y = 20;
        $("a.tooltip").mouseover(function (e) {
            this.myTitle = this.title;
            // 不设置这个属性为空的话，会有两个悬浮框，一个是自定义的，一个是html自带的
            this.title = "";
            let tooltip = `<div id="tooltip">${this.myTitle}</div>`;
            $("body").append(tooltip);
            $("#tooltip").css({
                "position": "absolute",
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            }).show("fast");
        }).mouseout(function (e) {
            this.title = this.myTitle;
            $("#tooltip").remove();
        }).mousemove(function (e) {
            // 实时修正元素位置， 没有这个事件的话鼠标移动时，悬浮框不移动
            $("#tooltip").css({
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            });
        });

        const imageX = 10;
        const imageY = 20;
        $("img.image-tooltip").mouseover(function (e) {
            let tooltip = `<img id="imageTooltip" class="image-tooltip" src="${this.src}" height="300" width="400"/>`;
            $("body").append(tooltip);
            $("#imageTooltip").css({
                "position": "absolute",
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            }).show("fast");
        }).mouseout(function (e) {
            $("#imageTooltip").remove();
        }).mousemove(function (e) {
            // 实时修正元素位置， 没有这个事件的话鼠标移动时，悬浮框不移动
            $("#imageTooltip").css({
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            });
        });
    })

</script>
</body>
</html>